<template>
  <!-- 引用问题信息弹窗 -->
  <dialog-form v-bind="$attrs" v-on="$listeners" ref="dialogForm" :width="1000" :visible.sync="visible" editModel="C" @confirm="handleConfirm">
    <template slot="formHeader">
      <!-- 搜索 -->
      <searchData :search-data="searchArr" @search="search" />
      <!-- 表格 -->
      <b-table
        ref="table"
        :select-config="{ use: true, type: 'checkbox', rowKey: 'id' }"
        :outSelectedRowKeys="selectedIds"
        :scroll="{ y: 280 }"
        row-key="id"
        :columns="columns"
        :request="loadData"
        :isShowCountBar="false"
      ></b-table>
    </template>
  </dialog-form>
</template>

<script>
import DialogForm from '@/components/DialogForm' // 自定义弹窗
import Selector from '@/components/Select/Selector' // 枚举选择器
import { rectificationNotice } from '@/api/quality/quality' // api
const searchArr = [
  // 搜索框
  {
    name: '问题描述',
    type: 'BaseInput',
    valueKey: 'problemCate'
  },
  {
    name: '分项工程',
    type: 'BaseInput',
    valueKey: 'subProjectName'
  },
  {
    name: '检查时间',
    value: 'checkTime',
    type: 'dateRange',
    attr: {
      rangeFormat: ['beginDate', 'endDate']
    }
  },
  {
    name: '整改状态',
    type: Selector,
    selectType: '3',
    valueKey: 'statusId',
    filterFn(item) {
      // 不要整改超时
      return item.code !== '5'
    }
  },
  {
    name: '检查区域',
    type: 'input',
    value: 'reaName'
  }
]
const columns = [
  {
    title: '质量问题描述',
    dataIndex: 'problem.problemTypeName'
  },
  {
    title: '分项工程',
    ellipsis: true,
    dataIndex: 'subProjectName'
  },
  {
    title: '检查区域',
    ellipsis: true,
    dataIndex: 'respAreaName'
  },
  {
    title: '整改人',
    ellipsis: true,
    dataIndex: 'problem.rectifierName'
  },
  {
    title: '整改状态',
    ellipsis: true,
    dataIndex: 'problem.statusName'
  }
]
export default {
  name: 'DialogCite',
  components: {
    DialogForm
  },
  props: {
    // 表单
    form: Object,
    // 已选行id集合
    selectedIds: {
      type: Array,
      default: () => []
    }
  },
  watch: {
    // 项目id发生改变时重新请求数据
    form: {
      deep: true,
      handler(e) {
        console.log(e)
        e.projectId && this.search()
      }
    },
    visible(e) {
      if (e) {
        this.init = true
        this.$refs.table?.refresh(true)
      }
    }
  },
  data() {
    this.searchArr = searchArr
    this.columns = columns
    return {
      visible: false, // 弹窗控件
      init: false, // 初始化标识
      // 加载数据方法 必须为 Promise 对象
      loadData: (parameter) => {
        if (!this.init) {
          return
        }
        const requestParameters = Object.assign({ unitId: this.form.orgId }, parameter, this.queryParam)
        return rectificationNotice.problemList(requestParameters).then((res) => {
          // 禁用外部已选行
          res.data.forEach((i) => {
            if (this.selectedIds.includes(i.id)) {
              i.disabled = true
            }
          })
          console.log(res)
          return res
        })
      }
    }
  },
  methods: {
    /**
     * @description: 搜索
     * @param {*} value：表单对象
     */
    search(value) {
      this.queryParam = value
      this.$refs.table?.refresh(true)
    },
    /**
     * @description: 操作选中项
     */
    handleConfirm() {
      if (this.$refs.table?.selectedRowsMap?.size) {
        let selectedRows = this.$refs.table.selectedRows()
        this.$emit('handleConfirm', this.formatData(selectedRows))
      } else {
        this.$message.warning('请选中后操作！')
      }
    },
    /**
     * @description: 格式化数据
     * @param {*} data：需要格式化的数据
     */
    formatData(data) {
      // 将checks里的problem扁平到checks
      let list = data?.length
        ? data.map((i) => {
            console.log({ ...i.problem, ...i })
            return { ...i.problem, ...i }
          })
        : []
      return list
    }
  }
}
</script>

<style lang="less" scoped>
 ::v-deep {
  .ant-checkbox-disabled {
    &::after {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      border: 1px solid #1890ff;
      border-radius: 2px;
      visibility: hidden;
      -webkit-animation: antCheckboxEffect .36s ease-in-out;
      animation: antCheckboxEffect .36s ease-in-out;
      -webkit-animation-fill-mode: backwards;
      animation-fill-mode: backwards;
      content: "";
    }
  }

  .ant-checkbox-disabled .ant-checkbox-inner::after {
      position: absolute;
      display: table;
      border: 2px solid #1890ff;
      border-top: 0;
      border-left: 0;
      -webkit-transform: rotate(45deg) scale(1) translate(-50%, -50%);
      transform: rotate(45deg) scale(1) translate(-50%, -50%);
      opacity: 1;
      -webkit-transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
      transition: all 0.2s cubic-bezier(0.12, 0.4, 0.29, 1.46) 0.1s;
      content: ' ';
  }
 }
</style>